<template>
    <section class="page-container-list">
        <DetailsHeader title="资金记录" class="mb-24" :showBack="false" />

        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="提现记录">
                <div class="page-search-form mb-24">
                    <a-select ref="select" v-model:value="widthdrawForm.status" placeholder="申请状态" allowClear @change="getWidthdrawList">
                        <a-select-option value="1">待审核</a-select-option>
                        <a-select-option value="3">已通过</a-select-option>
                        <a-select-option value="4">已到账</a-select-option>
                        <a-select-option value="5">已驳回</a-select-option>
                        <a-select-option value="6">已取消</a-select-option>
                    </a-select>

                    <div class="card-opt">
                        <a-button type="link" @click="router.push('/owner/cost-account')">管理账户</a-button>
                        <span class="tips">本月还可以申请{{ account?.providerAccount?.withdrawTime }}次</span>
                        <a-button type="primary" @click="handleAdd"
                            :disabled="!(account?.providerAccount?.WidthdrawBalance > 0)">申请提现</a-button>
                    </div>
                </div>

                <div class="page-content">
                    <a-table :dataSource="widthdrawList" :pagination="false">
                        <a-table-column key="createdAt" data-index="createdAt" title="申请时间" />
                        <a-table-column key="amount" data-index="amount" title="提现金额（元）" />
                        <a-table-column key="type" data-index="type" title="提现类型">
                            <template #default="{ record }">
                                {{ record.type == 1 ? '个人' : record.type == 2 ? '企业' : '' }}
                            </template>
                        </a-table-column>
                        <a-table-column key="actualAmount" data-index="actualAmount" title="实际到账（元）" />
                        <a-table-column key="auditStatus" data-index="auditStatus" title="申请状态">
                            <template #default="{ record }">
                                {{ selectDictLabel(auditStatusEnum, record?.auditStatus) }}
                            </template>
                        </a-table-column>
                    </a-table>

                    <pagination v-show="widthdrawFormTotal > 0" :total="widthdrawFormTotal" v-model:page="widthdrawForm.pn"
                        v-model:limit="widthdrawForm.ps" @pagination="getWidthdrawList" />
                </div>
            </a-tab-pane>

            <a-tab-pane key="2" tab="赔付记录">
                <div class="page-content">
                    <a-table :dataSource="payoutList" :pagination="false">
                        <a-table-column key="created_at" data-index="created_at" title="时间" />
                        <a-table-column key="amount" data-index="amount" title="赔付金额（元）" />
                        <a-table-column key="desc" data-index="desc" title="说明" />
                        <a-table-column key="status" data-index="status" title="状态">
                            <template #default="{ record }">
                                {{ selectDictLabel(payoutEnum, record.status) }}
                            </template>
                        </a-table-column>
                        <a-table-column key="action" title="操作">
                            <template #default="{ record }">
                                <a-popconfirm v-if="record.status == 0" title="确认无误?" @confirm="handleConfirm(record.id)">
                                    <a-button type="link" style="padding-left:0;">确认</a-button>
                                </a-popconfirm>
                            </template>
                        </a-table-column>
                    </a-table>

                    <pagination v-show="payoutTotal > 0" :total="payoutTotal" v-model:page="payoutForm.pn"
                        v-model:limit="payoutForm.ps" @pagination="getPayoutList" />
                </div>
            </a-tab-pane>
        </a-tabs>

    </section>
</template>

<script setup name="FundRecords">
import { ref } from 'vue'
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { getWidthdrawlistApi, getPayoutlistApi, getPayoutConfirmApi } from 'api/modules/api.ownerFundRecord'
import { useRouter } from 'vue-router'
import userInfoStore from '@/stores/userInfo.js'
import { storeToRefs } from 'pinia'
import { selectDictLabel } from '@/libs/util.common'
const useUserInfoStore = userInfoStore()
const { accountInfo: account } = storeToRefs(useUserInfoStore);
const router = useRouter()

const payoutEnum = [
    {
        label: '待确认',
        value: '0'
    },
    {
        label: '已确认',
        value: '1'
    },
    {
        label: '已取消',
        value: '2'
    }
]

const auditStatusEnum = [
    {
        label: '待审核',
        value: '1'
    },
    {
        label: '审核中',
        value: '2'
    },
    {
        label: '审核通过',
        value: '3',
    },
    {
        label: '驳回',
        value: '4',
    }
]

const activeKey = ref('1')

// 获取提现记录
const widthdrawForm = ref({
    pn: 1,
    ps: 10,
})

const widthdrawFormTotal = ref(0)
const widthdrawList = ref([])
const getWidthdrawList = () => {
    const params = {
        ...widthdrawForm.value
    }
    getWidthdrawlistApi(params).then(res => {
        widthdrawList.value = res.data.list || []
        widthdrawFormTotal.value = res.data.total
    })
};

getWidthdrawList()

// 获取赔付记录
const payoutList = ref([])
const payoutForm = ref({
    pn: 1,
    ps: 10,
})
const payoutTotal = ref(0)
const getPayoutList = () => {
    getPayoutlistApi(payoutForm.value).then(res => {
        payoutList.value = res.data.list || []
        payoutTotal.value = res.data.total
    })
};

getPayoutList()

const handleAdd = () => {
    router.push({ path: '/owner/apply-withdrawal', query: { commission: account?.value?.providerAccount?.WidthdrawBalance } })
}

// 机主确认赔付
const handleConfirm = (id) => {
    getPayoutConfirmApi({ id }).then(res => {
        if (res.code == 0) {
            getPayoutList()
        }
    })
}
</script>

<style scoped lang="scss">
.page-container-list {
    background: #fff;
    min-height: 100%;
    padding: 24px;
}

.page-search-form {
    display: flex;
    align-items: center;

    .card-opt {
        margin-left: auto;

        .tips {
            color: #8A93A7;
            font-family: PingFang SC;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            margin-right: 16px;
        }
    }
}

.page-footer {
    background: #fff;
    margin-top: 16px;
    text-align: right;
}
</style>
